import React, { useEffect, useState } from "react";
import { IndexBar, List } from "antd-mobile";
import axios from "../../utils/request";
import {useDispatch} from 'react-redux'
import { setStart,setEnd } from "../../store/citylist/Citylist";
import { useNavigate } from "react-router-dom";
function City() {
  const [data, setData] = useState([]);
  const navigate = useNavigate()
const dispatch = useDispatch()
  const getdata = async () => {
    const res = await axios.get("/city");
    console.log(res);
    setData(res.data.data);
  };

  useEffect(() => {
    getdata();
  }, []);

  const gos = (v) => {
    const left = localStorage.getItem('left')
    if(left == 'left'){
      dispatch(setStart(v))
      navigate(-1)
      console.log('11111111')
    }else{
      dispatch(setEnd(v))
      navigate(-1)
      console.log('22222222222')
    }
  };

  return (
    <div>
      <div style={{ height: window.innerHeight }}>
        <IndexBar>
          {data.cityList?.map((group) => {
            const { title, citys } = group;
            return (
              <IndexBar.Panel
                index={title}
                title={`标题${title}`}
                key={`标题${title}`}
              >
                <List>
                  {citys.map((item, index) => (
                    <List.Item
                      key={index}
                      onClick={() => {
                        gos(item.name);
                      }}
                    >
                      {item.name}
                    </List.Item>
                  ))}
                </List>
              </IndexBar.Panel>
            );
          })}
        </IndexBar>
      </div>
    </div>
  );
}

export default City;
